<template>
  <div id="myUeditor">
    <!--下面通过传递进来的id完成初始化-->
    <script :id="randomId" type="text/plain" style="height:420px;width:100%" />
  </div>
</template>

<script>

import '@/assets/iframe.css'
import api from '@/api'
export default {
  name: 'UE',
  props: {
    value: {
      type: String,
      default: function() {
        return ''
      }
    },
    // 配置可以传递进来
    ueditorConfig: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      // 每个编辑器生成不同的id,以防止冲突
      randomId: 'editor_' + (Math.random() * 100000000000000000),
      // 编辑器实例
      instance: null,
      ready: false
    }
  },
  watch: {
    value: function(val, oldVal) {
      if (val != null && this.ready) {
        this.instance = window.UE.getEditor(this.randomId, this.ueditorConfig)
        this.instance.setContent(val)
        // var ue = UE.getEditor('ue')
      }
    }
  },
  // 此时--el挂载到实例上去了,可以初始化对应的编辑器了
  mounted() {
    this.initEditor()
  },

  beforeDestroy() {
    // 组件销毁的时候，要销毁 UEditor 实例
    if (this.instance !== null && this.instance.destroy) {
      this.instance.destroy()
    }
  },
  methods: {
    initEditor() {
      const _this = this
      // dom元素已经挂载上去了
      _this.$nextTick(() => {
        _this.instance = window.UE.getEditor(_this.randomId, _this.ueditorConfig)
        // 绑定事件，当 UEditor 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
        _this.instance.addListener('ready', () => {
          _this.ready = true
          _this.$emit('ready', _this.instance)
        })
        // 实时监听工具栏上面的副标题按钮的状态
        // _this.instance.addListener('selectionchange', function() {
        //   var state = _this.instance.queryCommandState('blockquote')
        //   var _e = document.getElementById('edui18_state')
        //   if (state) {
        //     _e.classList.add('edui-state-checked')
        //   } else {
        //     _e.classList.remove('edui-state-checked')
        //   }
        // })
        // start
        _this.instance.addListener('contentChange', function(editor) {
          var content = _this.instance.getContent()
          var needChange = _this.getImgSrc(content)
          if (needChange && needChange.length > 0) {
            _this.changeImgUrl(needChange, content)
          }
        })
        // end
      })
    },
    setText(con) {
      this.instance = window.UE.getEditor(this.randomId, this.ueditorConfig)
      this.instance.setContent(con)
    },
    getImgSrc(rich) {
      var imgList = []
      rich.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
        if (capture && capture.indexOf('img1.17img.cn') === -1 && capture !== 'null' && capture !== 'https://img1.17img.cn/17img/null' && capture !== 'https://img1.17img.cn/17imgnull') {
          imgList.push(capture)
        }
      })
      return imgList
    },
    async changeImgUrl(list, content) {
      let newContent = content
      const listData = await api.common.changeImg({ originalList: list })
      for (let i = 0; i < listData.data.length; i++) {
        const imgItem = listData.data[i]
        newContent = newContent.replace(imgItem.original, imgItem.transition)
      }
      this.instance.setContent(newContent)
    }
  }
}
</script>
